
window.onload=function(){
var oDiv=document.getElementById('wrap');
var oUl1=document.getElementById('ul1');
var aLi=oUl1.getElementsByTagName('li');
var oIpt=document.getElementById('ipt1');
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv1=document.getElementById('face');
var aLi1=document.getElementsByTagName('li');
var oDiv2=document.getElementById('add');

oBtn1.onclick=function(){
    if(oIpt.value==''){
        oIpt.value='请输入内容';
    }
    else if(oIpt.value=='请输入内容'){
        oUl1.innerHTML=oUl1.innerHTML;
    }
    else{
        oUl1.innerHTML=oUl1.innerHTML+'<li><img src="3.png" /><a>'+oIpt.value+'</a></li>';
        oIpt.value='';
    }
    say();
}
oDiv1.onOff=true;
oBtn3.onclick=function(){
    if(oDiv1.onOff){
        oDiv1.style.display='block';
        oUl1.style.height='244px' ;
        oDiv1.onOff=false;
    }
    else{
        oDiv1.style.display='none';
        oUl1.style.height='350px' ;
        oDiv1.onOff=true;

    }    
}
for(var i=0;i<aLi1.length;i++){
    aLi1[i].onmouseover=function(){
        this.style.background='#999';
    }
    aLi1[i].onmouseout=function(){
        this.style.background='';
    }
    aLi1[i].onclick=function(){
        oIpt.value=oIpt.value+this.innerHTML;
        say();
    }
}
function say(){
    for(var i=0;i<aLi.length;i++){
            var oImg=aLi[i].getElementsByTagName('img')[0];
            var oA=aLi[i].getElementsByTagName('a')[0];
            if(i%2==0){
                aLi[i].style.textAlign='left';
                oA.style.background='#8bc5f2';
                oImg.src='3.png';
                oImg.style.cssFloat='left';
                oImg.style.marginRight='6px';
                oImg.style.styleFloat='left';
            }
            else{
                aLi[i].style.textAlign='right';
                oA.style.background='#eaebed';
                oImg.src='5.png';
                oImg.style.cssFloat='right';
                oImg.style.marginLeft='6px';
                oImg.style.styleFloat='right';
            }
            // console.debug(say)
        }
    }


}
